/*
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-04-27 18:06:12
 * @LastEditTime: 2022-04-28 11:28:09
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description: 
 */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './index.css'

export default class Footer extends Component {
  static propTypes = {
    onSelectAll: PropTypes.func.isRequired
  }
  render() {
    return (
      <div className="todo-footer">
        <label>
          <input type="checkbox" checked={this.props.finishNumber === this.props.allNumber && this.props.finishNumber!==0 ? true : false} onChange={e => this.props.onSelectAll(e.target.checked)} />
        </label>
        <span>
          <span>已完成{this.props.finishNumber}</span> / 全部{this.props.allNumber}
        </span>
        <button className="btn btn-danger" style={{ display: this.props.finishNumber > 0 ? 'block' : 'none' }} onClick={this.props.onClear}>清除已完成任务</button>
      </div>
    )
  }
}
